<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<style>
    img {
        height: 150px;
        width: 150px !important;
    }

    ul>li {
        list-style: none;
        cursor: pointer;
       
    }

    .div1 {
        float: left;
        color: darkred;
        font-size: 16px;
        font-weight: bold;
    }

    .div2 {
        float: left;
        color: rgb(55, 7, 228);
        font-size: 16px;
        font-weight: bold;
    }
</style>

<body>
    <div id='app'>
        <div class="div1">
            <ul v-for='item in list1' class="ul1">
                <li @click='click0(item.categoryId)'>{{item.name}}</li>
            </ul>
        </div>
        <div class="div2">
            <ul v-for='item2 in list2' class="ul2">
                <li>
                    <p v-text="item2.name"></p>
                    <p v-html="item2.content"></p>
                </li>
            </ul>
        </div>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                list1: null,
                list2: null,
                categoryId: 1
            },
            created() {
                let options = {
                    emulateJSON: true,
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                }
                // let fromdata =new FormData()
                // fromdata.append("categoryId",this.categoryId)
                axios.post('http://showme.myhope365.com/api/shop/shopCategory/open/list', options).then(res => {
                    console.log(res.data.rows)
                    this.list1 = res.data.rows
                    // console.log(res.data.rows[0].categoryId);
                    // res.data.rows[0].categoryId  第一项
                    // res.data.rows[0].name        第一项
                })
                let param = new URLSearchParams();
                param.append('categoryId', this.categoryId)
                axios.post('http://showme.myhope365.com/api/shop/shopGoods/open/list', param, options).then(res => {
                    console.log(res.data.rows)
                    this.list2 = res.data.rows
                })

            },
            methods: {
                click0(id) {
                    this.categoryId = id;
                    let options = {
                        emulateJSON: true,
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    }
                    let param = new URLSearchParams();
                    param.append('categoryId', id)
                    axios.post('http://showme.myhope365.com/api/shop/shopGoods/open/list', param, options).then(res => {
                        console.log(res.data.rows)
                        this.list2 = res.data.rows
                    })
                }
            }
        })
    </script>
</body>

</html>